import React, { Component } from 'react'

export default class TabC extends Component {
    /**
     * 产生两个字母，三个数字
     */
    state = {
        carNumbers: [],
        msg: "暂停",
        chooseCarNumber:""
    }
    componentDidMount() {
        this.createCarNumer()
    }
    createCarNumer = () => {
        this.timer = setInterval(() => {
            let array = []
            for (let index = 0; index < 6; index++) {
                const carNumber = this.begin()
                array.push(carNumber)
            }
            this.setState({
                carNumbers: array
            })
        }, 300);

    }
    begin = () => {
        let temp = []
        //产生三个数字
        for (let index = 0; index < 3; index++) {
            const num = Math.floor(Math.random() * 10)
            temp.push(num)
        }
        //产生两个字母
        for (let index = 0; index < 2; index++) {
            const num = Math.floor(Math.random() * 26 + 65)
            const chart = String.fromCharCode(num)
            temp.push(chart)
        }
        //随机排序,sort函数默认升序，自己定义排序
        temp.sort((a, b) => {
            //整数，负数，0
            return 0.5 - Math.random()
        })
        return "川A " + temp.join("")
    }
    pause = () => {
        if (this.timer) {
            clearInterval(this.timer)
            this.timer = null
        } else {
            this.createCarNumer()
        }

    }
    chooseNumber = (event) => {
        const element = event.target
        console.log(element.innerHTML);
        this.setState({
            chooseCarNumber:element.innerHTML
        })
    }
    componentWillUnmount() {
        clearInterval(this.timer)
    }
    render() {
        const { carNumbers,chooseCarNumber } = this.state
        return (
            <div>
                <ul onClick={this.chooseNumber}>
                    {carNumbers.map(item => {
                        return <li key={item}>{item}</li>
                    })}
                </ul>
                <p>你选中车牌：{chooseCarNumber}</p>
                <button onClick={this.pause}>暂停</button>
            </div>
        )
    }
}
